<template>
	<div class="logn">
		<van-nav-bar title="欢迎登录" left-text="返回" left-arrow right-text="注册" @click-left="onClickLeft"
			@click-right="onClickRight" fixed />

		<!-- 登录框-start -->
		<van-form @submit="onSubmit" class="form">
			<van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
				:rules="[{ required: true, message: '请填写用户名' }]" />
			<van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
				:rules="[{ required: true, message: '请填写密码' },{ pattern:/^\d{6}$/, message: '请输入正确内容' }]" />
			<div style="margin: 16px;">
				<van-button round block type="info" native-type="submit">登录</van-button>
			</div>
		</van-form>
		<!-- 登录框-end -->
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant'; //弹框
	export default {
		name: 'logn',
		data() {
			return {
				username: '',
				password: '',
				
			}
		},
		comments: {
		},
		methods: {
			//nav事件
			onClickLeft() {
				Toast('返回');
				this.$router.back()
			},
			onClickRight() {
				this.$router.push({
					name: 'register',
					params: {}
				});
			},
			//提交-start
			onSubmit(values) {
				console.log('submit', values);
				var params = new URLSearchParams();
				params.append('username', values.用户名);
				params.append('password', values.密码);
			 //axios登录
				this.$http.post("http://test1:90/test1_php/logn.php", params).then(res => {
					this.$store.commit('users/setUser', res.data) //把数据传给vuex的users
					this.$router.push({ //跳转设置页
						name: 'set_up',
						});
				}).catch(err => {
					Toast('cuowu');
					alert(err)
				})
			},
			//提交-end

		}, // methods-end

	}
</script>

<style>
	.form {
		margin-top: 25%;

	}
</style>
